<template>
	<view class="recommend-box">
		<miniBtn class="live-top">&ensp;接诊中</miniBtn>
		<view class="img-box">
			<image src="../../图片素材/doctor/male.png"></image>
		</view>
		<view class="rec-text">
			<view class="rec-title">
				<text class="rec-tags">
					<slot name="hosLevel">默甲</slot>
				</text>
				<text class="rec-hos">
					<slot name="hos">医院</slot>
				</text>
			</view>
			<text class="keshi">
				<slot name="keshi">科室</slot>
			</text>
			<view class="rec-doctor">
				<text class="rec-name">
					<slot name="docName">医师名称</slot>
				</text>
				<text class="keshi">
					<slot name="docTitle">医师职称</slot>
				</text>
			</view>
			<view class="rec-tag">
				<text class="tag" v-for="item in tags">{{item}}</text>
			</view>
			<view class="rec-price">
				<text>¥ <text class="rec-money"><slot name="price">50</slot></text>起</text>
				<uv-icon name="arrow-right" color="#444" size="14"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		tags: {
			type: Array,
			required: true
		}
	})
</script>

<style lang="scss">
	.recommend-box{
		width: 332rpx;
		height: 560rpx;
		background-color: white;
		border-radius: 18rpx;
		position: relative;
		overflow: hidden;
		.img-box{
			width: 100%;
			height: 296rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.live-top{
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}
		.rec-text{
			padding: 0 20rpx;
			.rec-title{
				display: flex;
				margin-top: 6rpx;
				.rec-tags{
					padding: 2rpx 6rpx;
					font-size: 24rpx;
					border: 1px solid #3c9cff;
					border-radius: 4rpx;
					color: #3c9cff;
				}
				.rec-hos{
					margin-left: 10rpx;
					font-size: 28rpx;
					letter-spacing: 1rpx;
				}
			}
			.keshi{
				font-size: 24rpx;
				color: #5e616b;
			}
			.rec-doctor{
				.rec-name{
					font-size: 24rpx;
					margin-right: 6rpx;
					color: #2b313d;
				}
			}
			.rec-tag{
				display: flex;
				margin-top: 12rpx;
				.tag{
					font-size: 24rpx;
					height: 36rpx;
					background-color: #ebf2ff;
					border-radius: 20rpx;
					padding: 0 16rpx;
					line-height: 36rpx;
					color: #418dff;
					margin-right: 6rpx;
					&:last-child{
						margin-right: 0;
					}
				}
			}
			.rec-price{
				margin-top: 4rpx;
				color: #ff695c;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				.rec-money{
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}
		
	}
</style>